<template>
  <DivisionTitle></DivisionTitle>
  <div class="home">
    <div class="left">
      <BigBanner />
      <div class="news">
        <div>
          <div class="info short"></div>
          <div class="info"></div>
          <div class="info"></div>
        </div>
        <div>
          <div class="info short"></div>
          <div class="info"></div>
          <div class="info"></div>
        </div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="right">
      <div class="info short"></div>
      <div class="info"></div>
      <div class="info"></div>
      <div class="info short"></div>
      <div class="info"></div>
      <div class="info"></div>
      <div class="info short"></div>
      <div class="info"></div>
      <div class="info"></div>
      <div class="info short"></div>
      <div class="info"></div>
      <div class="info"></div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import DivisionTitle from "@/components/DivisionTitle.vue";
import BigBanner from "@/components/Home/BigBanner.vue";
import Axios from "axios";
import request from "@/utils/request";

export default {
  name: "Home",
  components: {
    BigBanner,
    DivisionTitle,
  },
  inject: ["$request"],
  mounted() {
    // Axios.get(
    //   "https://sso.ifanr.com/api/v5/wp/article/stats/?limit=50&post_id__in=1403404,1403452,1403690,1402071,1400304,1403418,1403324,1402999,1403150,1403285,1403197,1403140,1403208,1401343,1402866,1403081,1402261,1401589,1403057,1402513,1402520"
    // ).then((res) => console.log(res));
    // this.$request.get('https://sso.ifanr.com/api/v5/wp/article/stats/?limit=50&post_id__in=1403404,1403452,1403690,1402071,1400304,1403418,1403324,1402999,1403150,1403285,1403197,1403140,1403208,1401343,1402866,1403081,1402261,1401589,1403057,1402513,1402520').then(res => console.log(res));
  },
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
}
.left {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 0;
}
.right {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid #d1d2d3;
  margin: 20px 0;
  padding: 30px 20px;
}
.info {
  width: 100%;
  height: 16px;
  background-color: #d1d2d3;
  margin: 0 0 10px 0;

  &.short {
    width: 60%;
  }
}
.news {
  display: flex;
  flex-direction: column;
  margin: 20px 0;

  & > div {
    width: 100%;
    height: 100px;
    border: 1px solid #d1d2d3;
    margin: 0 0 10px 0;
    padding: 20px;
    box-sizing: border-box;
  }
}
</style>
